<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>props基本使用</title>
    </head>
    <body>
        <!-- 准备好DOM容器 -->
        <div id="test1"></div>
        <div id="test2"></div>
        <div id="test3"></div>

        <!-- 必须按照顺序引入JS -->
        <!-- 引入React核心库 -->
        <script src="../js/react.development.js"></script>
        <!-- 引入react-dom库，用于操作DOM -->
        <script src="../js/react-dom.development.js"></script>
        <!-- 引入babel，用于将JSX翻译为JS -->
        <script src="../js/babel.min.js"></script>

        <!-- type必须为text/babel，代表里面的内容为JSX -->
        <script type="text/babel">
            // 创建组件
            class Person extends React.Component {
                render() {
                    const { name, gender, age } = this.props;

                    return (
                        <ul>
                            <li>姓名：{name}</li>
                            <li>性别：{gender}</li>
                            <li>年龄：{age + 1}</li>
                        </ul>
                    );
                }
            }

            ReactDOM.render(
                <Person name="Tom" gender="男" age={18} />,
                document.getElementById("test1")
            );
            ReactDOM.render(
                <Person name="Jerry" gender="女" age="19" />,
                document.getElementById("test2")
            );

            // 使用{...变量名}传递变量中的所有值到组件的props中
            // 原生JS不支持展示运算符展开对象，React+Babel支持在组件中使用展开运算符传递数据
            const p = { name: "老刘", gender: "女", age: 30 };
            ReactDOM.render(
                <Person {...p} />,
                document.getElementById("test3")
            );
        </script>
    </body>
</html>
